<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Orange &mdash; Free Website Template, Free HTML5 Template by FreeHTML5.co</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" />
    <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />




    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content="" />
    <meta name="twitter:image" content="" />
    <meta name="twitter:url" content="" />
    <meta name="twitter:card" content="" />
    <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
    <link rel="stylesheet" href="__CSS__/index/animate.css">
    <link rel="stylesheet" href="__CSS__/index/icomoon.css">
    <link rel="stylesheet" href="__CSS__/index/bootstrap.css">
    <link rel="stylesheet" href="__CSS__/index/style.css">
    <script src="__JS__/index/modernizr-2.6.2.min.js"></script>
    <script src="__JS__/index/respond.min.js"></script>

    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <!--<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>-->

    <!-------------------------------------------------------->
    <script src="__JS__/jquery-1.8.3.min.js"></script>
    <script src="__JS__/jssor.slider.min.js"></script>
    <link href="__CSS__/css/style.css" rel="stylesheet" type="text/css" />
    <link href="__CSS__/hotel/bootstrap.css" rel='stylesheet' type='text/css' />
    <!--<script src="__CSS__/hotel/jquery.min.js"></script>-->
    <link rel="stylesheet" href="__CSS__/hotel/font-awesome.css">
    <link href="__CSS__/hotel/style.css" rel="stylesheet" type="text/css" media="all" />
    <script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <script src="__CSS__/hotel/easyResponsiveTabs.js"></script>
    <script src="__CSS__/hotel/jquery.easydropdown.js" type="text/javascript"></script>
    <link rel="stylesheet" href="__CSS__/hotel/jquery-ui.css" />
    <script src="__CSS__/hotel/jquery-ui.js"></script>
    <!--<script type="text/javascript" src="__JS__/jquery.flexisel.js"></script>-->
    <script>
        $(function() {
            $("#datepicker,#datepicker1").datepicker();
        });
    </script>
    <style>

        /* jssor slider arrow navigator skin 05 css */
        /*
        .jssora05l                  (normal)
        .jssora05r                  (normal)
        .jssora05l:hover            (normal mouseover)
        .jssora05r:hover            (normal mouseover)
        .jssora05l.jssora05ldn      (mousedown)
        .jssora05r.jssora05rdn      (mousedown)
        */
        .jssora05l, .jssora05r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 40px;
            cursor: pointer;
            background: url('img/a17.png') no-repeat;
            overflow: hidden;
        }
        .jssora05l { background-position: -10px -40px; }
        .jssora05r { background-position: -70px -40px; }
        .jssora05l:hover { background-position: -130px -40px; }
        .jssora05r:hover { background-position: -190px -40px; }
        .jssora05l.jssora05ldn { background-position: -250px -40px; }
        .jssora05r.jssora05rdn { background-position: -310px -40px; }

        /* jssor slider thumbnail navigator skin 01 css */
        /*
        .jssort01 .p            (normal)
        .jssort01 .p:hover      (normal mouseover)
        .jssort01 .p.pav        (active)
        .jssort01 .p.pdn        (mousedown)
        */
        .jssort01 .p {
            position: absolute;
            top: 0;
            left: 0;
            width: 72px;
            height: 72px;
        }

        .jssort01 .t {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .jssort01 .w {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

        .jssort01 .c {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 68px;
            height: 68px;
            border: #000 2px solid;
            box-sizing: content-box;
            background: url('img/t01.png') -800px -800px no-repeat;
            _background: none;
        }

        .jssort01 .pav .c {
            top: 2px;
            _top: 0px;
            left: 2px;
            _left: 0px;
            width: 68px;
            height: 68px;
            border: #000 0px solid;
            _border: #fff 2px solid;
            background-position: 50% 50%;
        }

        .jssort01 .p:hover .c {
            top: 0px;
            left: 0px;
            width: 70px;
            height: 70px;
            border: #fff 1px solid;
            background-position: 50% 50%;
        }

        .jssort01 .p.pdn .c {
            background-position: 50% 50%;
            width: 68px;
            height: 68px;
            border: #000 2px solid;
        }

        * html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
            /* ie quirks mode adjust */
            width /**/: 72px;
            height /**/: 72px;
        }

    </style>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;">

<div class="fh5co-loader"></div>

<div id="page">
    <nav class="fh5co-nav" role="navigation">
        <div class="container">
            <div class="row">
                <div class="left-menu text-right menu-1">
                    <ul>
                        <li class="has-dropdown">
                            <a href="{:url('Services/index')}">旅行吧、骚年！</a>
                            <ul class="dropdown">
                                <li><a href="{:url('Tourism/tourism')}">景点</a></li>
                                <li><a href="{:url('Tourism/tourism_route')}">路线</a></li>
                                <li><a href="{:url('Tourism/tourism_guide')}">导游</a></li>
                                <li><a href="{:url('Tourism/agritainment')}">农家乐</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="{:url('Hotel/index')}">酒店</a>
                        </li>
                        <li><a href="{:url('Specialty/index')}">吃货世界</a></li>
                    </ul>
                </div>
                <div class="logo text-center">
                    <div id="fh5co-logo"><a href="{:url('Index/index')}">坪行網</a></div>
                </div>
                <div class="right-menu text-left menu-1">
                    <ul>
                        <li><a href="http://www.12306.cn/mormhweb/">在线票务</a></li>
                        <li><a href="{:url('About/index')}">关于我们</a></li>
                        <li><a href="{:url('Personal/index')}">个人中心</a></li>
                        <li>
                            {$username}
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </nav>

    <header id="fh5co-header" class="fh5co-cover fh5co-cover-sm" role="banner">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center">
                    <div class="display-t">
                        <div class="display-tc animate-box" data-animate-effect="fadeIn">
                            <h1>温馨世界（酒店）</h1>
                            <h2>一川风月留人醉；百样菜肴任客尝。</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="online_reservation" style="margin: 0 auto;text-align: center;">
        <div class="b_room">
            <div class="booking_room">
                <h4>网上预订一个房间</h4>
                <p>开始预订</p>
            </div>
            <form action="{:url('Hotel/room_order')}?hotel_id={$room_release[0]['id']}" method="post">
            <div class="reservation">
                <ul>
                    <li class="span1_of_1">
                        <h5>类型的房间:</h5>
                        <div class="section_room">
                            <select id="country" name="name" onchange="change_country(this.value)" class="frm-field required">
                                <option value="{$room_release[0]['r_name']}">{$room_release[0]['r_name']}</option>
                            </select>
                        </div>
                    </li>
                    <li  class="span1_of_1 left">
                        <h5>入住时间:</h5>
                        <div class="book_date">
                                <input class="date" id="datepicker" type="text" name="date_time" value="DD/MM/YY" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'DD/MM/YY';}">
                        </div>
                    </li>
                    <li  class="span1_of_1 left">
                        <h5>撤退时间:</h5>
                        <div class="book_date">
                                <input class="date" id="datepicker1" type="text" name="book" value="DD/MM/YY" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'DD/MM/YY';}">
                        </div>
                    </li>
                    <li class="span1_of_2 left">
                        <h5>人数:</h5>
                        <!----------start section_room----------->
                        <div class="section_room">
                            <select id="country" name="section" onchange="change_country(this.value)" class="frm-field required">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                            </select>
                        </div>
                    </li>
                    <li class="span1_of_3">
                        <div class="date_btn">
                                <input type="submit" style="width: 65px;height: 32px;border-radius: 5px;" value="提交" />
                        </div>
                    </li>
                    <li class="span1_of_3 inline-block right">
                        <div class="date_btn ">
                            <a href="{:url('Hotel/order')}"><input type="button" style="width: 75px;background:#b1b9b9;height: 32px;border-radius: 5px;" value="查看订单" /></a>
                        </div>
                    </li>
                    <div class="clearfix"></div>
                </ul>
            </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>
    <div style="padding: 15px 10px" class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                客房详情({$room_release[0]["r_name"]})
            </h3>
        </div>

        <div class="panel-body">
            <div class="container">
                <div class="main">
                    <div class="details">
                        <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 456px; overflow: hidden; visibility: hidden; background-color: #24262e;">
                            <!-- Loading Screen -->
                            <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
                                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
                                <div style="position:absolute;display:block;top:0px;left:0px;width:100%;height:100%;"></div>
                            </div>
                            <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 356px; overflow: hidden;">
                                <div data-p="144.50" style="display: none;">
                                    <img data-u="image" src="__UPLOADS__/{$cc[0]['r_img'][0]}" />
                                    <img data-u="thumb" src="__UPLOADS__/{$cc[0]['r_img'][0]}" />
                                </div>
                                <div data-p="144.50" style="display: none;">
                                    <img data-u="image" src="__UPLOADS__/{$cc[0]['r_img'][1]}" />
                                    <img data-u="thumb" src="__UPLOADS__/{$cc[0]['r_img'][1]}" />
                                </div>
                                <div data-p="144.50" style="display: none;">
                                    <img data-u="image" src="__UPLOADS__/{$cc[0]['r_img'][2]}" />
                                    <img data-u="thumb" src="__UPLOADS__/{$cc[0]['r_img'][2]}" />
                                </div>
                            </div>
                            <div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:800px;height:100px;" data-autocenter="1">
                                <div data-u="slides" style="cursor: default;">
                                    <div data-u="prototype" class="p">
                                        <div class="w">
                                            <div data-u="thumbnailtemplate" class="t"></div>
                                        </div>
                                        <div class="c"></div>
                                    </div>
                                </div>
                            </div>
                            <span data-u="arrowleft" class="jssora05l" style="top:158px;left:8px;width:40px;height:40px;"></span>
                            <span data-u="arrowright" class="jssora05r" style="top:158px;right:8px;width:40px;height:40px;"></span>
                        </div>
                    </div>
                    <div class="det_text text-right">
                        <p class="text-left" style="padding: 10px">
                            <span>酒店详情：</span>
                            <div>{$room_release[0]['r_introduce']}</div>
                        </p>
                        <p class="text-left" style="padding: 10px">
                            <span>价　　格：</span>
                            <div>￥{$room_release[0]['amounts']}</div>
                        </p>
                        <p class="text-left" style="padding: 10px">
                            <span>酒店地址：</span>
                        <div>{$_hotel[0]['detailed']}</div>
                        </p>
                        <div class="read_more">
                            <a href="javascript:void(expression)">read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="fh5co-started">
        <div class="container">
            <div class="row animate-box">
                <div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
                    <h2>关于我们</h2>
                    <p>四川.成都.成都生态旅游网  CopyRight ©2012-2021 版权所有  咨询电话:028-61765827  028-56468785  18580353587   24小时热线:13852320605 生态QQ客服1 :2009456360   生态QQ客服2:460498892   生态QQ客服3 :368533622</p>
                </div>
            </div>
            <div class="col-md-12 text-center">
                <p>
                <ul class="fh5co-social-icons">
                    <li><a href="#"><i class="icon-twitter"></i></a></li>
                    <li><a href="#"><i class="icon-facebook"></i></a></li>
                    <li><a href="#"><i class="icon-linkedin"></i></a></li>
                    <li><a href="#"><i class="icon-dribbble"></i></a></li>
                </ul>
                </p>
            </div>
        </div>
    </div>
    <div class="row copyright">
        <div class="col-md-12 text-center">

            <p>
            <ul class="fh5co-social-icons">

            </ul>
            </p>
        </div>
    </div>
    <div class="gototop js-top">
        <a href="#" class="__JS__/index-gotop"><i class="icon-arrow-up"></i></a>
    </div>
</div>

<div class="gototop js-top">
    <a href="#" class="__JS__/index-gotop"><i class="icon-arrow-up"></i></a>
</div>
<script src="__JS__/index/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<!--<script src="__JS__/index/bootstrap.min.js"></script>-->
<!-- Waypoints -->
<script src="__JS__/index/jquery.waypoints.min.js"></script>
<!-- Main -->
<script src="__JS__/index/main.js"></script>
<script>
    jQuery(document).ready(function ($) {

        var jssor_1_SlideshowTransitions = [
            { $Duration:1200,x:0.3,$During:{ $Left:[0.3,0.7]},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:-0.3,$SlideOut:true,$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:-0.3,$During:{ $Left:[0.3,0.7]},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,$SlideOut:true,$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$During:{ $Top:[0.3,0.7]},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:-0.3,$SlideOut:true,$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:-0.3,$During:{ $Top:[0.3,0.7]},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$SlideOut:true,$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,$Cols:2,$During:{ $Left:[0.3,0.7]},$ChessMode:{ $Column:3},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{ $Column:3},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$Rows:2,$During:{ $Top:[0.3,0.7]},$ChessMode:{ $Row:12},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{ $Row:12},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:0.3,$Cols:2,$During:{ $Top:[0.3,0.7]},$ChessMode:{ $Column:12},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{ $Column:12},$Easing:{ $Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,$Rows:2,$During:{ $Left:[0.3,0.7]},$ChessMode:{ $Row:3},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{ $Row:3},$Easing:{ $Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{ $Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{ $Column:3,$Row:12},$Easing:{ $Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{ $Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{ $Column:3,$Row:12},$Easing:{ $Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{ $Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{ $Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{ $Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
            { $Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{ $Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
        ];
        var jssor_1_options = {
            $AutoPlay: true,
            $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
            },
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
            },
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$,
                $Cols: 10,
                $SpacingX: 8,
                $SpacingY: 8,
                $Align: 360
            }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizing
        function ScaleSlider() {
            var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
            if (refSize) {
                refSize = Math.min(refSize, 800);
                jssor_1_slider.$ScaleWidth(refSize);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>
</body>
</html>

